<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .qq {
            list-style: none;
            display: flex;
        }

        ul li{
            margin-left: 20px;
            list-style: none;
        }
        .qq1 li{
            display: none;
        }
        .qqq{
            color: red;
        }
        .qw{
            display: block !important;
        }
    </style>
</head>

<body>
    <ul class="qq">

    </ul>
    <ul class="qq1">

    </ul>
</body>
<script>
    let ddd = [
        {
            id: 1,
            name: "社会",
            date: [
                {
                    tes: "社会 地方地方",
                },
                {
                    tes: "社会 地方地方",
                },
                {
                    tes: "社会 地方地方",
                },
                {
                    tes: "社会 地方地方",
                }
            ]
        },
        {
            id: 2,
            name: "民主",
            date: [
                {
                    tes: "民主 地方地方",
                },
                {
                    tes: "民主 地方地方",
                },
                {
                    tes: "民主 地方地方",
                },
                {
                    tes: "民主 地方地方",
                }
            ]
        },
        {
            id: 3,
            name: "文明",
            date: [
                {
                    tes: "文明 地方地方",
                },
                {
                    tes: "文明 地方地方",
                },
                {
                    tes: "文明 地方地方",
                },
                {
                    tes: "文明 地方地方",
                }
            ]
        },
        {
            id: 4,
            name: "和谐",
            date: [
                {
                    tes: "和谐 地方地方",
                },
                {
                    tes: "和谐 地方地方",
                },
                {
                    tes: "和谐 地方地方",
                },
                {
                    tes: "和谐 地方地方",
                }
            ]
        }
    ]
    Array.prototype.tt=function(wws){
        let sss=[]
        for(let i=0;i<this.length;i++){
            sss.push(wws(this[i],i,this))
            console.log(wws(this[i],i,this))
        }
        return sss.toString().replaceAll(",", "");
    }

    console.log(ddd)
    function $(name) {
        return document.querySelector(name);
    }
    function _(name) {
        return document.querySelectorAll(name);
    }
    let pp = $(".qq")
    let pp1 = $(".qq1")
    

    function sssd(){
        ddd.forEach(function (v, i) {
        pp.innerHTML += `<li class='${i==0?'qqq':''}'>${v.name}</li>`
        pp1.innerHTML += `<li class='${i==0?'qw':''}'>${
            console.log(v.date),
           v.date.tt(function (aa) {
                return `<p>${aa.tes}</p>`
        })
            }</li>`
    })
    }
    sssd();
   let dd=_(".qq li");
   let dd1=_(".qq1 li");
   dd.forEach(function(v,id){
    v.onclick=function(){
        dd1.forEach(function(s,i){
            s.className="";
            dd[i].className="";
        })
        dd1[id].className="qw";
        v.className='qqq';
    }
   })
    // pp.style.width="300px"
    // pp.style.height="300px"
    // pp.backgroundcolor="aqua"
</script>

</html>